<template>
    <Pop :title="user.noEmail ? $t('message.Register.bindEmail') : $t('message.Register.newUser')"
        :show="account.popRegister" :is-close="true" paddingType="spadding" :is-back="false" @close="onClose">
        <v-form validate-on="submit lazy" @submit.prevent="onSubmit" class="form-width">
            <div class="tip">
                <!-- 邮箱 -->
                {{ $t("message.Register.email") }}
            </div>
            <JInput v-model="email" :placeholder="$t('message.Register.iptEmail')" :err="err"></JInput>
            <!-- <v-text-field clearable class="j-input" v-model="email" placeholder="请输入您的邮箱" :loading="false" color="#15181D" :rules="emailRules" bg-color="#15181D"></v-text-field> -->

            <div v-if="!user.noEmail" class="tip tip1">
                <!-- 邀请码（选填） -->
                <span>{{ $t("message.Register.invitationCode") }}</span>
                <span class="tip1_arrows" @click="changeLnvitation">
                    <VIcon :class="[invitationShow ? 'arrows_colse':'arrows_open']">mdi mdi-chevron-down</VIcon>
                </span>
            </div>
            <JInput v-if="!user.noEmail && invitationShow" v-model="code" @change="saveCode" :disabled="!isEdit"
                :placeholder="$t('message.Register.iptInvitationCode')"></JInput>

            <!-- <JCheckbox v-model="agree" class="agree" :err="checkerr">
                <div class="check-tip c-title-5">
                    {{ $t("message.Register.agreeTitle") }}
                    <a target="_blank" class="links" href="https://vuetifyjs.com">
                        {{ $t("message.Register.thisermsOfService") }}
                    </a>
                    {{ $t("message.Register.and") }}
                    <a target="_blank" class="links" href="https://vuetifyjs.com">
                        {{ $t("message.Register.privacyPolicy") }}
                    </a>
                </div>
            </JCheckbox> -->

            <!-- <v-btn class="me-4" style="width: 100%; margin-top: 8px" color="primary" type="submit"> 下一步 </v-btn> -->
            <JButton :label="$t('message.Register.next')" class="button" @click="onRegister"></JButton>

            <div v-if="!user.noEmail" class="no-ac">
                <!-- 已有账户？ -->
                {{ $t("message.Register.isUser") }}
                <span class="no-rege" @click="gotoLogin">
                    <!-- 登陆 -->
                    {{ $t("message.Register.login") }}
                </span>
            </div>
            <Other v-if="!user.noEmail"></Other>
            <div class="mt-2 c-title-5 d-flex align-center " @click="goPolicy">
                <!-- {{ $t("message.Register.agreeTitle") }} {{ $t("message.Register.thisermsOfService") }}{{
                    $t("message.Register.privacyPolicy") }} -->
                <span class="bottom-title"> {{ $t("message.Register.agreeTitle") }}&nbsp</span>
                <span class="bottom-text" @click="toService()">{{ $t("message.Register.thisermsOfService") }}</span>
                <span class="bottom-text" @click="privacyPolicy()">{{ $t("message.Register.privacyPolicy") }}</span>
            </div>
        </v-form>
    </Pop>
</template>

<script lang="ts" setup>
import i18n from "@/locals/index";
import { ref, onMounted, watch } from "vue";
// import Star from "@/assets/Star.png";
import { useAccount } from "@/stores/account";
import Pop from "@/components/pop/index.vue";
import { toast } from "@/components/toast/toast";
// import { post } from "@/comm/request";
// import { URL_REGISTER, URL_REGISTER_CHECK } from "@/comm/api";
import Other from "./Other.vue";
import JInput from "@/components/j-input/index.vue";
import JButton from "@/components/j-button/index.vue";
import JCheckbox from "@/components/j-checkbox/index.vue";
import { useUser } from "@/stores/user";
import { post } from "@/comm/request";
import { URL_REGISTER_CHECK } from "@/comm/api";
import { isValidEmail } from "@/comm/format";
import { getURLParams } from "@/comm/tooler";
import { useRouter } from "vue-router";
const user = useUser();
const router = useRouter();
const agree = ref(true);
const err = ref("");
const checkerr = ref("");
const invitationShow = ref(false)
// const emailRules = ref([
//     (value: string) => {
//         if (value) return true;
//         return "E-mail is requred.";
//     },
//     (value: string) => {
//         if (/.+@.+\..+/.test(value)) return true;
//         return "E-mail must be valid.";
//     }
// ]);

const isEdit = ref(true);

const email = ref(localStorage.getItem("email") || "");
const code = ref("");
// const isRegister = ref(true);
const account = useAccount();
watch(
    () => agree.value,
    val => {
        if (val) {
            checkerr.value = "";
        }
    }
);

const saveCode = ()=>{
    if(code.value){
        localStorage.setItem("code", code.value);
    }
}

const goPolicy = () => {
    window.open("/privacy-policy.html")
}
const privacyPolicy = () => {
    window.open("/privacy-policy.html");
}
const toService = () => {
    window.open("/Terms-of-Service.html");
}
onMounted(() => {
    err.value = "";

    setTimeout(() => {
        // const param = getURLParams();
        // if (param && param.recommend) {
        //     code.value = param.recommend;
        // }
        code.value = localStorage.getItem('code') || '';
        if(code.value){
            invitationShow.value = true
        }
        // sessionStorage.setItem("code", "");
    }, 300);

    if (location.href.includes("recommend")) {
        isEdit.value = false;
    }
});

const onClose = () => {
    account.changePopRegister(false);
    err.value = "";
};
const changeLnvitation = () => {
    invitationShow.value = !invitationShow.value
    console.log('改变箭头显示', invitationShow.value)
}
const gotoLogin = () => {
    account.changePopLogin(true);
    account.changePopRegister(false);
};

const onRegister = async () => {
    if (!agree.value) {
        checkerr.value = i18n.global.t("message.Register.agreeProtocol");
        // toast(i18n.global.t('message.Register.agreeProtocol'));
        return;
    }
    if (!isValidEmail(email.value)) {
        // err.value = "邮箱格式不正确";

        err.value = i18n.global.t("message.Register.emailErr");
        return;
    }

    localStorage.setItem("email", email!.value + "");

    // if (!checkbox.value) {
    //     toast("請先同意服務條款和隱私政策", 1200);
    //     return;
    // }

    let res: any = await post(URL_REGISTER_CHECK, { email: email.value }, true);
    if (res.code !== 200) {
        err.value = res.info;
        return;
    }

    account.changeEmail(email.value);
    account.changeRecommendCode(code.value);

    account.changePopRegister(false);
    account.changePopRegisterVerify(true);

    err.value = "";
    console.log("URL_REGISTER", email);
    
    router.push("/registerverify");
};

const onSubmit = async (event: any) => {
    localStorage.setItem("email", email!.value + "");
    console.log(email.value, code.value);
    const res = await event;
    console.log(res);
    if (!res.valid) return;

    onRegister();
};

const checkbox = ref(true);
</script>

<style lang="less" scoped>
@import url("./index.less");

.form-width {
    width: 400px;
}

.tip1 {
    margin-top: 24px;

    .tip1_arrows {
        margin-left: 10px;
        color: var(--main);
        .arrows_open {
            transform-style: preserve-3d;
            transition: transform 0.2s;
            transform: rotate(0);
        }
        .arrows_colse {
            transform-style: preserve-3d;
            transition: transform 0.2s;
            transform: rotate(180deg);
        }
    }

}

.check-tip {
    margin-left: 10px;
}

.agree {
    margin-top: 40px;
    margin-bottom: 12px;
}

.button {
    margin-top: 20px;
}

.bottom-title {
    color: #45454e;
}

.bottom-text {
    color: #686873;
    cursor: pointer;
    text-decoration: underline;
    margin-left: 3px;
}
</style>
